<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闲置物品详情页</title>
    <link rel="stylesheet" href="../css/goods.css">
    <script src="../js/jquery.mini.js"></script>
</head>

<body>
<div class="toolbar"></div>
<div class="card">
    <div class="card-inner">
        <div class="user">
            <img id="head-pic" src="../imgs/t-shirt.jpg" alt="">
            <span class="username"></span>
            <span class="address">发布于：广东外语外贸大学</span>
            <span class="createtime"></span>
            <span class="u-right"><span class="typename">上衣</span>
                    <img src="../icon/标签.png" alt=""></span>
        </div>
        <div class="goods">
            <div class="g-left">
                <div class="big-pic"><img id="goodsimg" src="" alt=""></div>
                <div class="pic-list"></div>
            </div>
            <div class="g-right">
                <div class="price">￥99</div>
                <div class="name"></div>
                <div class="intro"></div>
            </div>
        </div>
        <div class="operation">
            <div class="bar">
                <div class="want-btn">我想要</div>
                <div class="collect"></div>
                <div class="comment">
                    <!-- 输入评论内容 -->
                    <textarea id="comment-content" placeholder="请输入评论内容"></textarea>
                    <!-- 提交评论按钮 -->
                    <button id="submit-comment">发表评论</button>
                    <!-- 编辑评论的输入框 -->
                    <textarea id="edit-comment-content" placeholder="编辑评论内容"></textarea>
                    <!-- 提交编辑的评论按钮 -->
                    <button id="submit-edit-comment">提交编辑</button>
                </div>
            </div>
        </div>
        <div class="comments">
            <h2>评论列表</h2>
            <ul id="comment-list"></ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-getUrlParam.js"></script>
<script>
    $(function () {
        $('.toolbar').load("toolbar.html");

        function getParam(paramName) {
            paramValue = "", isFound = !1;
            if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
                arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
                while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
            }
            return paramValue == "" && (paramValue = null), paramValue
        }

        var goods_id = getParam("goods_id");
        $.ajax({
            url: "/goods/" + goods_id + "/details",
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.state === 200) {
                    var data = result.data;
                    $('.username').text(data.userName);
                    $('.address').text("发布于" + data.postAddress);
                    $('.typename').text(data.goodsTypeName);
                    $('.createtime').text(data.createTime);
                    $('.name').text(data.goodsName);
                    $('.price').text("￥" + data.originalPrice);
                    $('.intro').html(data.goodsIntro);
                    $('#head-pic').attr("src", data.userImg);
                    $('#goodsimg').attr("src", data.goodsImgPath);
                } else {
                    alert("闲置商品加载成功！");
                }
            }
        });

        // 加载评论列表
        function loadComments() {
            $.ajax({
                url: "/comment/select",
                type: "post",
                data: {
                    postId: goods_id
                },
                dataType: "json",
                success: function (result) {
                    if (result.state === 200) {
                        var comments = result.data;
                        var commentList = $('#comment-list');
                        commentList.empty();
                        $.each(comments, function (index, comment) {
                            var listItem = $('<li>').text(comment.content);
                            commentList.append(listItem);
                        });
                    } else {
                        alert("评论加载失败！");
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX请求失败:', error);
                }
            });
        }

        // 初次加载评论列表
        loadComments();

        // 点击提交评论按钮
        $('#submit-comment').click(function () {
            var content = $('#comment-content').val(); // 获取评论内容
            if (content.trim() === '') {
                alert('评论内容不能为空');
                return;
            }

            // 发起 AJAX 请求，调用创建评论接口
            $.ajax({
                url: "/comment/create",
                type: "post",
                data: {
                    content: content,
                    postId: goods_id
                },
                dataType: "json",
                success: function (result) {
                    if (result.state === 200) {
                        alert("评论成功！");
                        // 刷新评论列表
                        loadComments();
                    } else {
                        alert("评论失败！");
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX请求失败:', error);
                }
            });
        });

        // 点击提交编辑的评论按钮
        $('#submit-edit-comment').click(function () {
            var editedContent = $('#edit-comment-content').val(); // 获取编辑后的评论内容
            if (editedContent.trim() === '') {
                alert('编辑后的评论内容不能为空');
                return;
            }

            // 发起 AJAX 请求，调用更新评论内容接口
            $.ajax({
                url: "/comment/update",
                type: "post",
                data: {
                    content: editedContent
                },
                dataType: "json",
                success: function (result) {
                    if (result.state === 200) {
                        alert("评论更新成功！");
                        // 刷新评论列表
                        loadComments();
                    } else {
                        alert("评论更新失败！");
                    }
                },
                error: function (xhr, status, error) {
                    console.error('AJAX请求失败:', error);
                }
            });
        });

        function getParam(paramName) {
            paramValue = "", isFound = !1;
            if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
                arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
                while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0
